// pages/feedback/feedback.js
/*  1 点击+ 调用小程序内部的悬着图片api
    2 获取到图片路径 数组
    3 把图片路径存到data的变量中
    4页面就可以根据图片数组进行循环显示自定义组件

    2 点击删除图片
        1获取被点击元素的索引
        2获取data中的图片数组
        3删除对应的图片元素
        4重新设置回data去
    3 点击“提交”
        1 获取文本域的内容
        2 对这些内容合法性验证
        3 验证通过用户选择的图片 上传到专门的图片的服务器 返回图片外网的连接
        4 文本域和外网的图片路劲一起提交到服务器
        5 清空
        6 返回上一页
    */
Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs: [{
                id: 0,
                value: "体验问题",
                isActive: true
            },
            {
                id: 1,
                value: "商品、商家投诉",
                isActive: false
            }
        ],
        // 被选中的图片路径数组
        chooseImgs: [],
        // 文本域内容
        textVal: ''
    },
    UploadImgs: [],
    // 标题点击切换样式
    handletabsItemChange(e) {
        // 1 获取原数组标题索引
        const { index } = e.detail;
        // 2 修改原数组
        let { tabs } = this.data;
        tabs.forEach((v, i) => {
            i === index ? v.isActive = true : v.isActive = false;
        });
        //  赋值回到data中
        this.setData({
            tabs
        })
    },
    // 点击 + 选择图片
    handleChooseImg() {
        //  调用小程序内置的 选择图片api
        wx.chooseImage({
            // 同时选择中的图片数量 
            count: 9,
            // 图片的格式 原图 缩略图
            sizeType: ['original', 'compressed'],
            // 图片的来源 相册 照相机
            sourceType: ['album', 'camera'],
            success: (res) => {
                // // tempFilePath可以作为img标签的src属性显示图片
                // const tempFilePaths = res.tempFilePaths
                this.setData({
                    // 图片数组进行拼接
                    chooseImgs: [...this.data.chooseImgs, ...res.tempFilePaths]
                })
            }
        })
    },
    // 点击自定义图片组件
    handleRemoveImg(e) {
        // 获取索引
        const { index } = e.currentTarget.dataset;
        //3 获取data中的图片数组
        let { chooseImgs } = this.data;
        //4删除元素
        chooseImgs.splice(index, 1)
        this.setData({
            chooseImgs
        })
    },
    // 文本域的输入事件
    handleTextInput(e) {
        this.setData({
            textVal: e.detail.value
        })
    },
    // 提交按钮的点击
    hanldeFormSubumit() {
        // 获取文本域的值
        const { textVal, chooseImgs } = this.data;
        // 合法性
        if (!textVal.trim()) {
            wx.showToast({
                title: '输入不合法',
                icon: 'none',
                mask: true
            });
            return;
        }
        // 上传图片到专门的图片服务器
        // 不支持多个文件同时上传
        // 遍历数组挨个上传
        wx.showLoading({
            title: "正在上传中",
            mask: true,
        });

        // 判断有没有需要上传的数组
        if (chooseImgs.length != 0) {
            chooseImgs.forEach((v, i) => {
                wx.uploadFile({
                    // 要上传到哪里
                    url: 'https://img.coolcr.cn/api/upload',
                    //  被上传的文件的路径
                    filePath: v,
                    // 上传的文件名字，自定义名称
                    name: "image",
                    // 顺带的文本信息
                    formData: {},
                    success: (result) => {
                        // console.log(result);
                        let data = JSON.parse(result.data)
                            // console.log(data.data.url);
                        this.UploadImgs.push(data.data.url)

                        // console.log(this.UploadImgs);
                        // 所有图片上传完毕触发
                        if (i === chooseImgs.length - 1) {
                            wx.hideLoading();

                            console.log("把文本内容提交到后台中");
                            // 充值页面？
                            this.setData({
                                    textVal: "",
                                    chooseImgs: []
                                })
                                // 返回上一页
                            wx.navigateBack({
                                delta: 1
                            });

                        }

                    }

                });
            })
        } else {
            // 关闭加载
            wx.hideLoading();
            console.log("只是提交了文本");
            // 返回上一页
            wx.navigateBack({
                delta: 1
            });

        }

    },
    onShow() {

    }

})